extends templates/main.jade

block title
  | Tips & Tricks for creating a minimal website | xigoi

block content
  h1 Tips & Tricks for creating a minimal website
  p When trying to make a website small, we need to make sacrifices. Sure, the default fonts are quite ugly, but is it worth spending several hundred kilobytes on a random webfont that nobody will notice anyway? Here are some ways to solve common problems that would otherwise require adding huge assets.

  h2 Unicode icons
  p If you want icons on your site, there are a few ways to get them. The most common is an icon font. Obviously, that's not what we want — they're usually very heavy. Some of them have the option to download only the icons you need. However, then you need to get a new copy of the font every time you want to introduce a new icon, which gets annoying fast.
  p Another option is SVG. That's nice for standalone icon, but it's really tricky to make it look good next to text. Also, SVG icon packs often either have too few icons or mix icons with different styles, which doesn't look good.
  p
    | Fortunately, if we get back to the idea of icon fonts, it turns out that there are already many characters that can be used as icons! Do you need a warning sign? Here you go: 
    code ⚠ U+26A0 Warning Sign
    | . How about a checkmark? No problem: 
    code ✓ U+2713 Checkmark
    | . Sometimes you'll have to get a little creative. For example, there's no “external link” icon, but 
    code ➚ U+279A Heavy North East Arrow
    |  works just fine. Or if you need a hamburger menu icon, there is the interestingly named 
    code ☰ U+2630 Trigram for Heaven
    | . I recommend the 
    a(href="https://unicode-table.com/en/") Unicode Table
    |  website for looking up Unicode icons.

  h2 SVG images
  p
    | This should go without saying, but whenever you need a simple raster image, use the SVG format. It's lightweight, especially if you write it yourself, and you can embed it directly in HTML, so you don't even need an 
    code &lt;img&gt;
    |  tag.

  h2 Recommended font stacks
  p
    | The default fonts are ugly, but you can at least try to find a good-looking font on the user's device. Here are two nice font stacks, courtesy of the 
    a(href="https://512kb.club/faq") 512 KB Club
    | : 
    pre
      code.
        # Sans-serif font stack
        font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;

        # Serif font stack
        font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

  h2 Choose your framework
  p
    | You don't need JavaScript for writing articles, but when you want to make something interactive, you'll have to get your hands dirty. Unfortunately, making web apps in plain JS is quite painful — its mechanisms for interacting between the page and the logic are rather rudimentary. There are many frameworks that try to make this situation more pleasant, but they involve inserting a sizable script into your page. I personally like 
    a(href="https://v3.vuejs.org/") Vue 3
    | , which is not that bad when it comes to size, but it's really overkill for simple pages. Here is a selection of similar frameworks in decreasing order of size and features:
  h3
    a(href="https://v3.vuejs.org/") Vue 3
  p
    | Size: 125 KB minified (
    a(href="https://cdn.jsdelivr.net/npm/vue@3.2.9/dist/vue.esm-browser.prod.js") 3.2.9 production version, ES6 module
    | )
  ul
    li Reactive templating system
    li Components
    li Custom events
    li Single file components
    li Transitions
    li Async support
    li Routing
    li Server-side rendering
    li Plugins
  h3
    a(href="https://alpinejs.dev/") Alpine
  p
    | Size: 33 KB minified (
    a(href="https://cdn.jsdelivr.net/npm/alpinejs@3.3.1/dist/cdn.min.js") 3.3.1 ES6 module
    | )
  ul
    li Reactive templating system
    li Custom events
    li Transitions
    li Async support
    li Safe mode
    li Plugins
  h3
    a(href="https://github.com/vuejs/petite-vue") Petite Vue
  p
    | Size: 15 KB minified (
    a(href="https://cdn.jsdelivr.net/npm/petite-vue@0.2.3/dist/petite-vue.es.js") 0.2.3 ES6 module
    | )
  ul
    li Reactive templating system
    li Rudimentary components
  h3
    a(href="https://github.com/zserge/q/") Q!
  p
    | Size: 1 KB minified (
    a(href="https://cdn.jsdelivr.net/npm/@zserge/q@0.0.2/q.min.js") 0.0.2
    | )
  ul
    li Rudimentary reactive templating system
